<script setup lang="ts">
// 定义普通数据即可
const info = 'nnn'
const htmlStr = '<button>点我试试</button>'
</script>

<!-- 结构 -->
<template>
  <div>
    <!-- 普通文本v-html和v-text 没有区别，标签内部，不能写东西，会被覆盖（没有意义） -->
    <p v-text="info"></p>
    <p v-html="info"></p>
    <h1>渲染标签</h1>
    <!-- 针对html标签如果要解析，需要v-html -->
    <p v-text="htmlStr"></p>
    <p v-html="htmlStr"></p>
    <!-- 无论是v-html还是v-text都会覆盖子元素（内容会被替换） -->
    <!-- 不希望替换标签的内容推荐使用插值表达式{{  }}，html不会解析 -->
    <h2>插值表达式</h2>
    <p>左边内容{{ htmlStr }}右边内容</p>
  </div>
</template>

<!-- 样式 -->
<style scoped>
</style>